<template>
  <view>
    <!-- 聊天 -->
    <view class="chatMain" :style="{ 'z-index': modeZIndex }">
      <!-- 聊天模式 -->
      <view class="modeList">
        <template v-if="isMode">
          <view @click="handleMode('简洁')" :class="['modeItem', currentMode === '简洁' ? 'active' : '']">
            <image class="icon" src="../static/images/home/earthIcon.png"></image>
            简洁回复模式
          </view>
          <view @click="handleMode('普通')" :class="['modeItem', currentMode === '普通' ? 'active' : '']">
            <image class="icon" src="../static/images/home/fileIcon.png"></image>
            普通模式
          </view>
        </template>
        <view class="upload-wrapper">
          <up-upload @afterRead="handleFileUpload" name="files" accept="application/pdf" :maxSize="10 * 1024 * 1024"
            :previewFullImage="false" :disabled="hasToken">
            <view class="fileBtn modeItem active">上传文件</view>
          </up-upload>
        </view>
      </view>
      <!-- 消息发送框 -->
      <view class="chatLine">
        <up-input class="chatInput" v-model="messageValue" placeholder="发消息" shape="circle">
          <template #suffix>
            <image class="sendIcon" src="../static/images/home/sendIcon.png" @click="sendMessage"></image>
          </template>
        </up-input>
      </view>
    </view>
    <!-- 聊天框 -->
    <ChatPopup v-model:chatPopupShow="chatPopupShow" />
    <!-- 登录框 -->
    <LoginPopup v-model:loginPopupShow="loginPopupShow" />
  </view>
</template>

<script setup>
import ChatPopup from './ChatPopup.vue';
import LoginPopup from './LoginPopup.vue';
import { ref, toRefs, getCurrentInstance, watch, computed } from 'vue';

const currentMode = ref('简洁'); // 当前模式
const messageValue = ref(''); // 消息内容
const { proxy } = getCurrentInstance();
const chatPopupShow = ref(false); // 聊天框
const loginPopupShow = ref(false); // 登录

const props = defineProps({
  // 是否显示模式
  isMode: {
    type: Boolean,
    default: true
  },
  // 控制聊天框的显示和隐藏
  chatListShow: {
    type: Boolean,
    default: false
  },
  // 是否上传过文件
  fileInfo: {
    type: Object,
    default: () => ({})
  }
});
const { isMode, chatListShow, fileInfo } = toRefs(props);
const modeZIndex = ref(1); // 层级

// 计算是否有登录token
const hasToken = computed(() => {
  return !uni.getStorageSync('loginToken');
});

// 展开时修改层级
watch(chatPopupShow, (nv, ov) => {
  modeZIndex.value = nv ? 99999 : 1;
})
// 控制聊天框的显示和隐藏
watch(chatListShow, (nv, ov) => {
  chatPopupShow.value = nv;
})
// 控制聊天框的显示和隐藏
watch(fileInfo, (nv, ov) => {
  if (nv.name) {
    messageValue.value = nv.name;
    sendMessage();
  }
}, { deep: true })

// 模式切换
const handleMode = (item) => {
  if (currentMode.value !== item) {
    currentMode.value = item;
  }
}

// 处理文件上传
const handleFileUpload = ({ file }) => {
  console.log('上传的文件:', file);
  messageValue.value = file.name;
  sendMessage();
}

// 点击发送消息
const sendMessage = () => {
  // 未登录
  if (!uni.getStorageSync('loginToken')) {
    loginPopupShow.value = true;
  } else {
    if (messageValue.value) {
      // 已登录
      // 打开弹窗
      chatPopupShow.value = true;
      // 发送消息到聊天框
      proxy.$store.commit('HANDLE_NEW_MESSAGE', messageValue.value);
      // 发送完毕后置空聊天框
      messageValue.value = '';
    } else {
      proxy.$util.toast('请输入文字');
    }
  }
}
</script>

<style lang='scss' scoped>
// 聊天框
.chatMain {
  left: 32rpx;
  bottom: 64rpx;
  height: 150rpx;
  position: fixed;

  // 聊天模式
  .modeList {
    display: flex;
    align-items: center;

    .modeItem {
      height: 40rpx;
      display: flex;
      font-size: 20rpx;
      color: #A6A6A6;
      padding: 0 10rpx;
      line-height: 40rpx;
      align-items: center;
      border-radius: 40rpx;
      border: 1px solid #B9B9B9;
      background: rgba(255, 255, 255, 0.69);

      .icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 4rpx;
        filter: grayscale(100%) brightness(0.7) invert(0.6);
      }

      &:first-child {
        margin-right: 14rpx;
      }
    }

    .active {
      color: #FFF;
      border: transparent;
      background: linear-gradient(291deg, #E43928 14.36%, #E77E2B 86.61%);

      .icon {
        filter: grayscale(100%) brightness(1) invert(0);
      }
    }
    .fileBtn{
      padding: 0 16rpx;
    }
  }

  // 上传文件
  .upload-wrapper {
    margin-left: auto;
  }

  // 信息发送
  .chatLine {
    width: 676rpx;
    height: 90rpx;
    margin-top: 18rpx;

    .sendIcon {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>